<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>window.CKEDITOR_BASEPATH = '/static/ckeditor/ckeditor/';</script>
    {% load static %}
	<!-- // <script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script> -->
	<!-- // <script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script> -->
    <script type="text/javascript" src="{% static "app/js/jquery-1.11.2.min.js" %}"></script>
    <script type="text/javascript" src="{% static "app/bootstrap-3.3.7/js/bootstrap.min.js" %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static "app/bootstrap-3.3.7/css/bootstrap.min.css" %}">

</head>
<body>


<div class="container">
    <div>
        {% load paginate_tags %}
        {% paginate article_list 2 %}
        {% for article in article_list %}
        <div>
            <h2>
                <a href="{% url 'app:detail' article.pk %}">{{ article.title }}</a>
            </h2>
            <p><span class="glyphicon glyphicon-time"></span> {{ article.created_time }}
                <a href='' class='btn btn-link'><span class="glyphicon glyphicon-eye-open"></span> 阅读({{ article.views }})</a>
                <a href='' class='btn btn-link'><span class="glyphicon glyphicon-comment"></span> 评论数({{ article.comments }})</a>
                <a href='' class='btn btn-link'><span class="glyphicon glyphicon-thumbs-up"></span> 点赞({{ article.likes }})</a>
            </p>
            <!-- <hr> -->
            <p>{{ article.body | safe | truncatewords_html:10}}</p>
        </div>
        <div><a class="btn btn-primary" href="">Read More <span class="glyphicon glyphicon-chevron-right"></span></a></div>
        <span class="post-views">阅读量: {{ article.views }}</span>
        <hr>
        {% endfor %}
    </div>

    <div>
        <ul class='pagination'>
            {% if article_list.has_previous %}
                <li><a href="?page={{ article_list.previous_page_number }}">&laquo;</a></li>
            {% else %}
                <!-- <li><a class="'disabled">&laquo;</a></li> -->
            {% endif %}


            {% for page in pages %}
                <li {% ifequal forloop.counter current_page %} class="active" {% endifequal %}><a href="?page={{ page }}">{{ page }}</a></li>
            {% endfor %}

            {% if article_list.has_next %}
                <li><a href="?page={{ article_list.next_page_number }}">&raquo;</a></li>
            {% else %}
                <!-- <li><a class="'disabled">&raquo;</a></li> -->
            {% endif %}
        </ul>
    </div>
</div>
</body>
</html>